<!-- 报价详情 -->
<template>
	<view class="">
		<u-navbar :is-back="true" title="报价详情"></u-navbar>

		<view class="bg-white">
			<view class="center fw padding20 time-box" v-if="!isPass">
				<text class="color-red">价格有效期：{{info.endQuoteDate || ''}}</text>
			</view>
			<view class="bg-gray center fw padding20 " v-else>
				<text class="color-gray">价格已失效：{{info.endQuoteDate || ''}}</text>
			</view>
			<view class="p-l30 p-t30 p-b30">
				<view class="m-b30">报价详情 <text class="color-green" v-if="info.state == 0">（洽谈中）</text> <text
						class="color-gray" v-if="info.state == 2">（已过期）</text> <text class="price-color"
						v-if="info.state == 1">（已成交）</text> </view>

				<view class="video-image-box">
					<!-- <video v-if="info.enquiryVideo" class="w-150 h-150 br12 m-r20" :src="info.enquiryVideo"></video> -->
					<image :src="info.picture" @click="showImg()" class="br12 m-r20 m-b20 w-150 h-150">
					</image>
				</view>

				<view class="m-t30 m-r30 fs28">
					{{info.details}}
				</view>
			</view>
			<view class="bg-gray w100" style="height: 30rpx;"></view>
			<view class="padding30">
				<view class="fw m-b30">报价单详情</view>

				<view class="flex-bettwen fs28 m-b20 m-t30">
					<text>报价单号：</text>
					<text>{{info.quoteId}}</text>
				</view>
				<view class="line-x"></view>
				<view class="flex-bettwen fs28 m-b20 m-t30">
					<text>报价时间：</text>
					<text>{{info.quoteDate}}</text>
				</view>
				<view class="line-x"></view>
				<view class="flex-bettwen fs28 m-b20 m-t30">
					<text>单价：</text>
					<text>￥{{info.price}}/{{unitObj[info.unit]}}</text>
				</view>
				<view class="line-x"></view>
				<view class="flex-bettwen fs28 m-b20 m-t30">
					<text>货物类型：</text>
					<text>{{info.isCustomized?'定做':'现货'}}</text>
				</view>
				<view class="line-x"></view>
				<view class="flex-bettwen fs28 m-b20 m-t30">
					<text>采购数量：</text>
					<text>{{info.number}}</text>
				</view>
				<view class="line-x"></view>
				<view class="flex-bettwen fs28 m-b20 m-t30">
					<text>商品总价：</text>
					<text class="price-color">￥{{info.number * info.price}}</text>
				</view>
			</view>



		</view>




		<view class="bg-white padding-lr30 m-t20">
			<view class="flex-bettwen fs28 m-b20 m-t30 p-t20 p-b20">
				<text>询价订单：</text>
				<view class="">
					<text class="color-gray fs24" @click="goEnquriy">查看详情</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>









		<!-- 轻提示 -->
		<u-toast ref="uToast" />

		<view class="footer-box">
			<u-button type="primary" @click="goChat">联系买家</u-button>
		</view>
	</view>
</template>

<script>
	import {
		quoteDetails
	} from '@/api/enquriy/index.js'
	export default {
		data() {
			return {
				info: {}, // 询价详情
				show: false,
				isPass: false,
				id: '',
				unitObj: {
					'0': '米',
					'1': '条',
					'2': '码',
					'3': '公斤',
					'4': '本'
				}
			}
		},
		onLoad(options) {
			this.id = options.quoteId
			this.getQuoteDetails()
		},
		mounted() {
			// console.log('路径参数', this.$scope.options.data);
			// this.id = JSON.parse(decodeURIComponent(this.$scope.options.data))

			// console.log(this.info);
			// this.compareDates(this.info.endQuoteDate)
		},
		methods: {
			// 取报价单详情
			async getQuoteDetails() {
				let res = await quoteDetails({
					// shopId,
					quoteId: this.id
				})
				console.log('这是订单详情', res);

				this.info = res.data
			},

			// 时间对比
			compareDates(dateStr) {
				const date = new Date(dateStr);
				const now = new Date();

				if (date < now) {
					console.log('传入的日期已经过去了。');
					this.isPass = true
				} else if (date > now) {
					this.isPass = false
					console.log('传入的日期还未发生。');
				} else {
					console.log('传入的日期就是现在。');
				}
			},
			// 预览图片
			showImg(i) {
				uni.previewImage({
					urls: [info.picture] // 需要预览的图片http链接列表
				});
			},

			// 去聊天
			goChat() {
				// if (!this.info.imUserName) {
				// 	uni.showToast({
				// 		title: '对方暂无环信账号'
				// 	})
				// } else {
				// 	uni.navigateTo({
				// 		url: `/pages/msg/messageDetail?data=${this.info.imUserName}`
				// 	});
				// }
				uni.navigateBack()
			},
			// 询价订单
			goEnquriy() {
				uni.navigateTo({
					url: `/pages/opportunity/enquiry-detail?enquiryId=${this.info.enquiryId}&isQuote=true`
				})
			},
			// 点击结束询价
			async handleEnd() {
				this.show = true
			},
			// 确认结束询价
			async sureEnd() {
				let res = await apiCloseEnquiry({
					id: this.info.id
				})
				this.$refs.uToast.show({
					title: '操作成功',
					type: 'success',
				})


				setTimeout(() => {
					uni.navigateBack()
				}, 1000)

			}
		}
	}
</script>

<style lang="scss" scoped>
	.time-box {
		background: #fbe7e9;
	}

	.color-red {
		color: #c9091d;
	}

	.color-green {
		color: #13be57;
	}

	.video-image-box {
		display: flex;
		flex-wrap: wrap;
	}

	.footer-box {
		width: 100%;
		position: fixed;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>